<script setup>
import { useRoute, useRouter } from 'vue-router'
import { reactive, ref, onMounted, onUnmounted, nextTick, computed, watch } from 'vue';
const $route = useRoute();
const $router = useRouter()
import { events } from '../../bus/bus.js'
import axios from "axios"

//跳转渲染模块
const deviceType = ref("")
let temp = JSON.parse(localStorage.getItem("deviceType"));
if (temp == undefined) {
    routerlink()
}
deviceType.value = temp;

const deviceTotal = reactive([])
const dataFormat = (res) => { //添加设备大类名称及大类下的小设备id、名称、大类名称、短地址
    if (deviceTotal.length == 0) {
        deviceTotal.push({ 'name': res[0].productName, 'equipment': [] })
    }
    for (let i = 0; i < res.length; i++) {
        for (let j = 0; j < deviceTotal.length; j++) {
            if (res[i].productName == deviceTotal[j].name) { break }
            else if (j == deviceTotal.length - 1) {
                deviceTotal.push({ 'name': res[i].productName, 'equipment': [] })
                break;
            }
        }
    }
    for (let i = 0; i < res.length; i++) {
        for (let j = 0; j < deviceTotal.length; j++) {
            if (res[i].productName == deviceTotal[j].name) {
                deviceTotal[j].equipment.push({ deviceId: res[i].deviceId, deviceName: res[i].name, productName: res[i].productName, sadder: res[i].sadder })
            }
        }
    }
}

const twiceDataFormat = (respon) => {//添加小设备对应的房间
    for (let i = 0; i < deviceTotal.length; i++) {
        for (let j = 0; j < deviceTotal[i].equipment.length; j++) {
            deviceTotal[i].equipment[j].room = "未知房间"
        }
    }
    for (let i = 0; i < deviceTotal.length; i++) {
        for (let j = 0; j < deviceTotal[i].equipment.length; j++)
            for (let k = 0; k < respon.length; k++) {
                for (let z = 0; z < respon[k].deviceList.length; z++) {
                    if (respon[k].deviceList[z].deviceId == deviceTotal[i].equipment[j].deviceId) {
                        deviceTotal[i].equipment[j].room = respon[k].name;
                    }
                }
            }
    }
}

const thirdthDataFormat = (res) => {//添加小设备对应的属性
    for (let j = 0; j < deviceTotal.length; j++) {
        for (let k = 0; k < deviceTotal[j].equipment.length; k++) {
            if (res[deviceTotal[j].equipment[k].sadder] != undefined) {
                deviceTotal[j].equipment[k].brightness = res[deviceTotal[j].equipment[k].sadder].brightness
                deviceTotal[j].equipment[k].humidity = res[deviceTotal[j].equipment[k].sadder].humidity
                deviceTotal[j].equipment[k].left = res[deviceTotal[j].equipment[k].sadder].left
                deviceTotal[j].equipment[k].right = res[deviceTotal[j].equipment[k].sadder].right
                deviceTotal[j].equipment[k].temperature = res[deviceTotal[j].equipment[k].sadder].temperature
                deviceTotal[j].equipment[k].lockState = res[deviceTotal[j].equipment[k].sadder].lockState
            }
        }
    }
}

const forthDataFormat = () => {//格式小设备对应的属性
    for (let j = 0; j < deviceTotal.length; j++) {
        for (let k = 0; k < deviceTotal[j].equipment.length; k++) {
            if (deviceTotal[j].equipment[k].brightness != null) {
                for (let i = 0; i < deviceTotal[j].equipment[k].brightness.length; i += 2) {
                    switch (i) {
                        case 0:
                            deviceTotal[j].equipment[k].firstLight = parseInt(deviceTotal[j].equipment[k].brightness[i]) * 16 + parseInt(deviceTotal[j].equipment[k].brightness[i + 1])
                            break;
                        case 2:
                            deviceTotal[j].equipment[k].secondLight = parseInt(deviceTotal[j].equipment[k].brightness[i]) * 16 + parseInt(deviceTotal[j].equipment[k].brightness[i + 1])
                            break;
                        case 4:
                            deviceTotal[j].equipment[k].thirdLight = parseInt(deviceTotal[j].equipment[k].brightness[i]) * 16 + parseInt(deviceTotal[j].equipment[k].brightness[i + 1])
                            break;
                        case 6:
                            deviceTotal[j].equipment[k].forthLight = parseInt(deviceTotal[j].equipment[k].brightness[i]) * 16 + parseInt(deviceTotal[j].equipment[k].brightness[i + 1])
                            break;
                        default:
                            break;
                    }
                }
                if (deviceTotal[j].equipment[k].brightness == "00000000") {
                    deviceTotal[j].equipment[k].status = 0
                } else {
                    deviceTotal[j].equipment[k].status = 1
                }
            } else if ((deviceTotal[j].equipment[k].left != null) && (deviceTotal[j].equipment[k].right != null)) {
                if ((deviceTotal[j].equipment[k].left == 100) && (deviceTotal[j].equipment[k].right == 100)) {//反向判断，窗帘100反而是关上
                    deviceTotal[j].equipment[k].status = 1
                } else {
                    deviceTotal[j].equipment[k].status = 0
                }
            } else if (deviceTotal[j].equipment[k].productName == "网关") {
                deviceTotal[j].equipment[k].status = 1
            } else if (deviceTotal[j].equipment[k].lockState != null) {
                if (deviceTotal[j].equipment[k].lockState == "00") {
                    deviceTotal[j].equipment[k].status = 0
                } else {
                    deviceTotal[j].equipment[k].status = 1
                }
            }
        }
    }
}

const cardRequest = axios.create({
    baseURL: 'api',
    timeout: 3000,
    withCredentials: true,
});
fetch("/api/getEndDeviceList ", {
    method: "GET",
})
    .then(res => res.json())
    .then(res => {
        dataFormat(res)
        cardRequest.post("/room", {
            type: "getRoomList"
        }).then((respon) => {
            twiceDataFormat(respon.data.roomList)
            fetch("/api/getProperties ", {
                method: "GET",
            })
                .then(r => r.json())
                .then(r => {
                    thirdthDataFormat(r)
                    forthDataFormat()
                    getDevice()
                })
        })
    })
setInterval(() => {
    fetch("/api/getEndDeviceList ", {
        method: "GET",
    })
    .then(res => res.json())
    .then(res => {
        dataFormat(res)
        cardRequest.post("/room", {
            type: "getRoomList"
        }).then((respon) => {
            twiceDataFormat(respon.data.roomList)
            fetch("/api/getProperties ", {
                method: "GET",
            })
                .then(r => r.json())
                .then(r => {
                    thirdthDataFormat(r)
                    forthDataFormat()
                })
        })
    })
}, 5000);


const device = reactive([])
const getDevice = () => {
    for (let i = 0; i < deviceTotal.length; i++){
        if (deviceTotal[i].name == deviceType.value) {
            device.push(...deviceTotal[i].equipment)
        }
    }
}

const routerlink = () => {
    $router.push({ name: "home" });
}

const zeroString = (val) => {
    if (val < 10) return "0" + parseInt(val);
    else return parseInt(val).toString(16)
}

const subNow = (index, val, productName, other) => {
    if (productName == "智能窗帘") {
        if (other == 'left') {
            if (device[index].left > 0) { 
                device[index].left--
                cardRequest.post("/message", [{
                    'saddr': String(val.slice(0, 2) + ' ' + val.slice(2, 4)),
                    "dcode": "02",
                    "rdata": "01 "+ zeroString(device[index].left)
                }])
            }
        }else if (other == 'right') {
            if (device[index].right > 0) {
                device[index].right--
                cardRequest.post("/message", [{
                    'saddr': String(val.slice(0, 2) + ' ' + val.slice(2, 4)),
                    "dcode": "02",
                    "rdata": "02 " + zeroString(device[index].right)
                }])
            }
        }
    } else if (productName == "灯控") {
        if (other == 'one') {
            if (device[index].firstLight > 0) {
                device[index].firstLight--
                cardRequest.post("/message", [{
                    'saddr': String(val.slice(0, 2) + ' ' + val.slice(2, 4)),
                    "dcode": "01",
                    "rdata": "01 00 " + zeroString(device[index].firstLight)
                }])
            }
        } else if (other == 'two') {
            if (device[index].secondLight > 0) {
                device[index].secondLight--
                cardRequest.post("/message", [{
                    'saddr': String(val.slice(0, 2) + ' ' + val.slice(2, 4)),
                    "dcode": "01",
                    "rdata": "02 00 " + zeroString(device[index].secondLight)
                }])
            }
        } else if (other == 'third') {
            if (device[index].thirdLight > 0) {
                device[index].thirdLight--
                cardRequest.post("/message", [{
                    'saddr': String(val.slice(0, 2) + ' ' + val.slice(2, 4)),
                    "dcode": "01",
                    "rdata": "03 00 " + zeroString(device[index].thirdLight)
                }])
            }
        } else if (other == 'four') {
            if (device[index].forthLight > 0) {
                device[index].forthLight--
                cardRequest.post("/message", [{
                    'saddr': String(val.slice(0, 2) + ' ' + val.slice(2, 4)),
                    "dcode": "01",
                    "rdata": "04 00 " + zeroString(device[index].forthLight)
                }])
            }
        }
    }
}

const addNow = (index, val, productName, other) => {
    if (productName == "智能窗帘") {
        if (other == 'left') {
            if (device[index].left < 100) {
                device[index].left++
                    cardRequest.post("/message", [{
                        'saddr': String(val.slice(0, 2) + ' ' + val.slice(2, 4)),
                        "dcode": "02",
                        "rdata": "01 " + zeroString(device[index].left)
                }])
            }
        }else if (other == 'right') {
            if (device[index].right < 100) {
                device[index].right++
                cardRequest.post("/message", [{
                    'saddr': String(val.slice(0, 2) + ' ' + val.slice(2, 4)),
                    "dcode": "02",
                    "rdata": "02 " + zeroString(device[index].right)
                }])
            }
        }
    } else if (productName == "灯控") {
        if (other == 'one') {
            if (device[index].firstLight < 100) {
                device[index].firstLight++
                cardRequest.post("/message", [{
                    'saddr': String(val.slice(0, 2) + ' ' + val.slice(2, 4)),
                    "dcode": "01",
                    "rdata": "01 00 " + zeroString(device[index].firstLight)
                }])
            }
        } else if (other == 'two') {
            if (device[index].secondLight < 100) {
                device[index].secondLight++
                cardRequest.post("/message", [{
                    'saddr': String(val.slice(0, 2) + ' ' + val.slice(2, 4)),
                    "dcode": "01",
                    "rdata": "02 00 " + zeroString(device[index].secondLight)
                }])
            }
        } else if (other == 'third') {
            if (device[index].thirdLight < 100) {
                device[index].thirdLight++
                cardRequest.post("/message", [{
                    'saddr': String(val.slice(0, 2) + ' ' + val.slice(2, 4)),
                    "dcode": "01",
                    "rdata": "03 00 " + zeroString(device[index].thirdLight)
                }])
            }
        } else if (other == 'four') {
            if (device[index].forthLight < 100) {
                device[index].forthLight++
                cardRequest.post("/message", [{
                    'saddr': String(val.slice(0, 2) + ' ' + val.slice(2, 4)),
                    "dcode": "01",
                    "rdata": "04 00 " + zeroString(device[index].forthLight)
                }])
            }
        }
    }
}

const controlNow = (index, val, productName, other) => {
    if (productName == "智能窗帘") {
        if (other == 'left') {
            if (device[index].left > 100) device[index].left = 100
            else if(device[index].left < 0) device[index].left = 0
            cardRequest.post("/message", [{
                'saddr': String(val.slice(0, 2) + ' ' + val.slice(2, 4)),
                "dcode": "02",
                "rdata": "01 " + toString(device[index].left.toString(16))
            }])
        }else if (other == 'right') {
            if (device[index].right > 100) device[index].right = 100
            else if (device[index].left < 0) device[index].right = 0
            cardRequest.post("/message", [{
                'saddr': String(val.slice(0, 2) + ' ' + val.slice(2, 4)),
                "dcode": "02",
                "rdata": "02 " + toString(device[index].left.toString(16))
            }]);
        }
    } else if (productName == "灯控") {
        if (other == 'one') {
            if (device[index].firstLight > 100) device[index].firstLight = 100
            if (device[index].firstLight < 0) device[index].firstLight = 0
            cardRequest.post("/message", [{
                'saddr': String(val.slice(0, 2) + ' ' + val.slice(2, 4)),
                "dcode": "01",
                "rdata": "01 00 " + zeroString(device[index].firstLight)
            }])
        } else if (other == 'two') {
            if (device[index].secondLight > 100) device[index].secondLight = 100
            if (device[index].secondLight < 0) device[index].secondLight = 0
            cardRequest.post("/message", [{
                'saddr': String(val.slice(0, 2) + ' ' + val.slice(2, 4)),
                "dcode": "01",
                "rdata": "02 00 " + zeroString(device[index].secondLight)
            }])
        } else if (other == 'third') {
            if (device[index].thirdLight > 100) device[index].thirdLight = 100
            if (device[index].thirdLight < 0) device[index].thirdLight = 0
            cardRequest.post("/message", [{
                'saddr': String(val.slice(0, 2) + ' ' + val.slice(2, 4)),
                "dcode": "01",
                "rdata": "03 00 " + zeroString(device[index].firstLight)
            }])
        } else if (other == 'four') {
            if (device[index].forthLight > 100) device[index].forthLight = 100
            if (device[index].forthLight < 0) device[index].forthLight = 0
            cardRequest.post("/message", [{
                'saddr': String(val.slice(0, 2) + ' ' + val.slice(2, 4)),
                "dcode": "01",
                "rdata": "04 00 " + zeroString(device[index].firstLight)
            }])
        }
    }
}

const lockChange = (status,index) => {
    if (status) {
        device[index].status = 0
        cardRequest.post("/door", {
            "rdata": "00"
        })
    } else {
        device[index].status = 1
        cardRequest.post("/door", {
            "rdata": "01"
        })
    }
}

const writeName = ref()
const writeNameIsp = ref(0)
const setFace = () => {
    writeNameIsp.value = 1
}
const submitFace = () => {
    cardRequest.post("/door", {
        "rdata": "02",
        "name": writeName.value
    })
}
</script>

<template>
     <body class="w-[100vw] h-[100vh] select-none bg-cover bg-no-repeat bg-center" style="background-image:url(../../background.png)">
        <header class="h-[5rem] w-full flex justify-between items-center">
            <h1 class="text-[#c77430] border-l-8 border-[#ffbf40] pl-[.5rem] ml-[1rem]">{{ deviceType }}</h1>
            <div class="text-[#ffbf40] mx-[1rem] my-[.5rem]" @click="routerlink()"><i class="iconfont">&#xe72e;</i></div>
        </header>
        <main class="w-full h-auto flex flex-col items-center justify-between">
            <allcard class="w-full flex items-center justify-center flex-col h-[70vh] overflow-auto pt-[5rem]">
                <card class="w-5/6 h-[10rem] bg-gradient-to-r from-[#ffe259] to-[#ffa751] opacity-80 rounded-xl flex my-[.5em]" v-for="(item, index) in device" :key="index">
                    <name class="w-1/4 h-full flex justify-center items-center text-[1.4rem] font-bold text-[#e29c45]" style="writing-mode:vertical-rl;">{{ item.deviceName }}</name>
                    <property class="w-3/4">
                        <window class="flex w-full flex-col justify-around h-full items-center" v-if="item.left != null|| item.right != null">
                            <left class="w-4/5 flex flex-col">
                                <text class="text-[1.2rem] text-[#000000] flex items-center justify-center my-[.5rem]">左边窗帘打开程度</text>
                                <roll class="w-full h-[2rem] flex items-center justify-center">
                                    <div class="w-2/3 h-[2rem] bg-white rounded-full relative flex items-center justify-between">
                                        <sub @click="subNow(index,item.sadder,item.productName,'left')" class="w-1/4 h-full pt-[.8rem] ml-[.3rem]"><i class="iconfont">&#xe711;</i></sub>
                                        <num class="w-1/2 h-full">
                                            <input @blur="controlNow(index, item.sadder, item.productName, 'left')" v-model="item.left" class="w-full h-full text-center outline-none" type="text">
                                        </num>
                                        <add @click="addNow(index, item.sadder, item.productName, 'left')" class="w-1/4 h-full flex items-center pr-[.5rem]"><i class="iconfont">&#xe712;</i></add>
                                    </div>
                                </roll>
                            </left>
                            <right class="w-4/5 flex flex-col">
                                <text class="text-[1.2rem] text-[#000000] flex items-center justify-center mb-[.2rem]">右边窗帘打开程度</text>
                                <roll class="w-full h-[2rem] flex items-center justify-center">
                                    <div class="w-2/3 h-[2rem] bg-white rounded-full relative flex items-center justify-between">
                                        <sub @click="subNow(index, item.sadder, item.productName, 'right')" class="w-1/4 h-full pt-[.8rem] ml-[.3rem]"><i class="iconfont">&#xe711;</i></sub>
                                        <num class="w-1/2 h-full">
                                            <input @blur="controlNow(index, item.sadder, item.productName, 'right')" v-model="item.right" class="w-full h-full text-center outline-none" type="text">
                                        </num>
                                        <add @click="addNow(index, item.sadder, item.productName, 'right')" class="w-1/4 h-full flex items-center pr-[.5rem]"><i class="iconfont">&#xe712;</i></add>
                                    </div>
                                </roll>
                            </right>
                        </window>
                        <light class="flex w-full flex-col justify-around h-full items-center overflow-auto" v-if="item.brightness != null">
                            <all class="mt-[10rem]">
                                <brightness class="w-4/5 flex flex-col">
                                    <text class="text-[1.2rem] text-[#000000] flex items-center justify-center my-[.5rem]">一号灯打开程度</text>
                                    <roll class="w-full h-[2rem] flex items-center justify-center">
                                        <div class="w-2/3 h-[2rem] bg-white rounded-full relative flex items-center justify-between">
                                            <sub @click="subNow(index, item.sadder, item.productName, 'one')" class="w-1/4 h-full pt-[.8rem] ml-[.3rem]"><i class="iconfont">&#xe711;</i></sub>
                                            <num class="w-1/2 h-full">
                                                <input @blur="controlNow(index, item.sadder, item.productName, 'one')" v-model="item.firstLight" class="w-full h-full text-center outline-none" type="text">
                                            </num>
                                            <add @click="addNow(index, item.sadder, item.productName, 'one')" class="w-1/4 h-full flex items-center pr-[.5rem]"><i class="iconfont">&#xe712;</i></add>
                                        </div>
                                    </roll>
                                </brightness>
                                <brightness class="w-4/5 flex flex-col">
                                    <text class="text-[1.2rem] text-[#000000] flex items-center justify-center my-[.5rem]">二号灯打开程度</text>
                                    <roll class="w-full h-[2rem] flex items-center justify-center">
                                        <div class="w-2/3 h-[2rem] bg-white rounded-full relative flex items-center justify-between">
                                            <sub @click="subNow(index, item.sadder, item.productName, 'two')" class="w-1/4 h-full pt-[.8rem] ml-[.3rem]"><i class="iconfont">&#xe711;</i></sub>
                                            <num class="w-1/2 h-full">
                                                <input @blur="controlNow(index, item.sadder, item.productName, 'two')" v-model="item.secondLight" class="w-full h-full text-center outline-none" type="text">
                                            </num>
                                            <add @click="addNow(index, item.sadder, item.productName, 'two')" class="w-1/4 h-full flex items-center pr-[.5rem]"><i class="iconfont">&#xe712;</i></add>
                                        </div>
                                    </roll>
                                </brightness>
                                <brightness class="w-4/5 flex flex-col">
                                    <text class="text-[1.2rem] text-[#000000] flex items-center justify-center my-[.5rem]">三号灯打开程度</text>
                                    <roll class="w-full h-[2rem] flex items-center justify-center">
                                        <div class="w-2/3 h-[2rem] bg-white rounded-full relative flex items-center justify-between">
                                            <sub @click="subNow(index, item.sadder, item.productName, 'three')" class="w-1/4 h-full pt-[.8rem] ml-[.3rem]"><i class="iconfont">&#xe711;</i></sub>
                                            <num class="w-1/2 h-full">
                                                <input @blur="controlNow(index, item.sadder, item.productName, 'three')" v-model="item.thirdLight" class="w-full h-full text-center outline-none" type="text">
                                            </num>
                                            <add @click="addNow(index, item.sadder, item.productName, 'three')" class="w-1/4 h-full flex items-center pr-[.5rem]"><i class="iconfont">&#xe712;</i></add>
                                        </div>
                                    </roll>
                                </brightness>
                                <brightness class="w-4/5 flex flex-col">
                                    <text class="text-[1.2rem] text-[#000000] flex items-center justify-center my-[.5rem]">四号灯打开程度</text>
                                    <roll class="w-full h-[2rem] flex items-center justify-center">
                                        <div class="w-2/3 h-[2rem] bg-white rounded-full relative flex items-center justify-between">
                                            <sub @click="subNow(index, item.sadder, item.productName, 'four')" class="w-1/4 h-full pt-[.8rem] ml-[.3rem]"><i class="iconfont">&#xe711;</i></sub>
                                            <num class="w-1/2 h-full">
                                                <input @blur="controlNow(index, item.sadder, item.productName, 'four')" v-model="item.forthLight" class="w-full h-full text-center outline-none" type="text">
                                            </num>
                                            <add @click="addNow(index, item.sadder, item.productName, 'four')" class="w-1/4 h-full flex items-center pr-[.5rem]"><i class="iconfont">&#xe712;</i></add>
                                        </div>
                                    </roll>
                                </brightness>
                            </all>
                        </light>
                        <lock class="flex w-full flex-col justify-around h-full items-center overflow-auto" v-if="item.lockState != null">
                            <lockstatus class="flex items-center justify-around w-full flex-col">
                                <div class="flex items-center justify-around w-full">
                                    <switch @click="lockChange(item.status, index)" class="w-[5.5rem] h-[2.1rem] rounded-2xl flex relative justify-end items-center transition-all duration-220 ease-in-out" :style="item.status ? 'background-color:#7bcfa6;box-shadow:inset 0 2px 4px #5c9c7d' : 'background-color:#f05654;box-shadow:inset 0 2px 4px #bd4342'">
                                        <point class="absolute h-[1.8rem] w-[1.8rem] rounded-full bg-gradient-to-r from-[#ffe259] to-[#ffa751] top-[0.08rem] transition-all duration-220 ease-in-out" :style="item.status ? 'left:0.1rem;box-shadow: 0 2px 4px #725e82' : 'left:3.55rem;box-shadow: 0 2px 4px #725e82'"></point>
                                    </switch>
                                </div>
                                <div class="flex items-center justify-around w-full my-[.5rem]">
                                    <div @click="setFace()" class="w-[4rem] h-[4rem] bg-[#cc9833] rounded-3xl flex justify-center items-center hover:bg-[#997226]">
                                        <i class="iconfont w-full h-full flex justify-center items-center text-[#935623]">&#xe627;</i>
                                    </div>
                                    <div v-if="writeNameIsp" class="flex flex-col items-center">
                                        <input v-model="writeName" type="text" placeholder="请输入录入人脸所属用户" class="outline-none h-[1.8rem] rounded-2xl text-center mb-[.5rem]">  
                                        <button @click="submitFace()" class="text-[#ffe575] font-bold w-[4rem] h-[1.8rem] bg-[#cc9833] rounded-full hover:bg-[#976334]">提交</button>   
                                    </div>
                                </div>
                            </lockstatus>
                        </lock>
                    </property>
                </card>
            </allcard>
        </main>
      </body>
</template>

<style scoped>
/* 在线链接服务仅供平台体验和调试使用，平台不承诺服务的稳定性，企业客户需下载字体包自行发布使用并做好备份。 */
@font-face {
  font-family: 'iconfont';  /* Project id 4312277 */
  src: url('//at.alicdn.com/t/c/font_4312277_itsvnuj8z0i.woff2?t=1705446811258') format('woff2'),
       url('//at.alicdn.com/t/c/font_4312277_itsvnuj8z0i.woff?t=1705446811258') format('woff'),
       url('//at.alicdn.com/t/c/font_4312277_itsvnuj8z0i.ttf?t=1705446811258') format('truetype');
}
.iconfont{
    font-family:"iconfont" !important;
    font-size:32px;
    font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;
}
</style>